<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <header>
        <div class="left">
            <span>后台管理系统</span>
            <p class="iconfont icon-gengduo"></p>
        </div>
        <div class="right">
            <span>当前用户:bootstrap中文&emsp;角色:&nbsp;管理员</span>
        </div>
    </header>
    <div class="container">
        <aside>
            <ul>
                <li><span class="iconfont icon-shouye"></span>&emsp;后台首页&emsp;&emsp;&emsp;<span class="iconfont
                        icon-jiantou_liebiaoxiangyou"></span></li>
                <li><span class="iconfont icon-bijiben"></span>&emsp;设计元素&emsp;&emsp;&emsp;<span class="iconfont
                        icon-jiantou_liebiaoxiangyou"></span></li>
                <li><span class="iconfont icon-bianjishuru-xianxing"></span>&emsp;表单元素&emsp;&emsp;&emsp;
                    <span class="iconfont icon-jiantou_liebiaoxiangyou"></span></li>
                </li>
                <li><span class="iconfont icon-bijiben"></span>&emsp;示例页面&emsp;&emsp;&emsp;<span class="iconfont
                        icon-jiantou_liebiaoxiangyou"></span></li>
                <li><span class="iconfont icon-bijiben"></span>&emsp;常用列表&emsp;&emsp;&emsp;<span class="iconfont
                        icon-jiantou_liebiaoxiangyou"></span></li>
                <li><span class="iconfont icon-daima"></span>&emsp;脚本插件&emsp;&emsp;&emsp;<span class="iconfont
                        icon-jiantou_liebiaoxiangyou"></span></li>
                <li><span class="iconfont icon-daima"></span>&emsp;统计图表&emsp;&emsp;&emsp;<span class="iconfont
                        icon-jiantou_liebiaoxiangyou"></span></li>
            </ul>
        </aside>
        <main>
            <div class="top">
                <div class="left">
                    <span class="iconfont icon-jiantou_liebiaoxiangyou"></span>
                    <span class="wenzi">欢迎首页</span>
                </div>
                <div class="right">
                    <span class="iconfont icon-jiantou_liebiaoxiangyou"></span>
                    <span style="font-size: 12px;">页面操作</span>
                </div>
            </div>
            <div class="middle">
                <div class="kuai" style="background-color: #0196c0;">
                    <h6>今日收入</h6>
                    <h4>100,000.00</h4>
                </div>
                <div class="kuai" style="background-color: #0099cb;">
                    <h6>今日收入</h6>
                    <h4>100,000.00</h4>
                </div>
                <div class="kuai" style="background-color: #14c376;">
                    <h6>今日收入</h6>
                    <h4>100,000.00</h4>
                </div>
                <div class="kuai" style="background-color: #8f9080;">
                    <h6>今日收入</h6>
                    <h4>100,000.00</h4>
                </div>
            </div>
            <div class="chart">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>订单号</th>
                        <th>商品名称</th>
                        <th>下单日期</th>
                        <th>状态</th>
                        <th>处理情况</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr> -->
                </tbody>
            </table>
        </main>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./promise-ajax.js"></script>
<script>
    ajax('get', './data.json', {}).then((data) => {
        // console.log(data);
        render(data)
    })
    function render(data) {
        var str = data.list.map((item, index) => {
            return `<tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.data}</td>
                    <td>${item.status}</td>
                    <td>${item.case}</td>
                </tr>`
        }).join('')
        document.querySelector('tbody').innerHTML = str;
    }
    
    let con = document.querySelector('.chart .left')
    let e = echarts.init(con)
    e.setOption({
        title: { //图表的标题
            text: '每月收入',
            left: 'none',
        },
        legend: {
            top: 25
        },
        xAxis: [
            {
                type: 'category',
                data: [01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {

                min: 1500,
                max: 5000,
                interval: 500,

            }
        ],
        series: [
            {
                name: '当前每月收入',
                type: 'bar',
                color: '#7f9dd9',
                data: [2500, 1550, 1700, 3300, 4600, 3500, 1600, 2500, 2200, 1800, 3700, 1800]
            },
            {
                name: '同期每月收入',
                type: 'bar',
                color: '#c3e7fd',
                data: [2000, 1700, 1900, 3000, 4000, 3750, 1800, 2000, 2700, 2200, 3600, 3550]
            }
        ]
    }
    )
    let con2 = document.querySelector('.chart .right')
    let e2 = echarts.init(con2)
    e2.setOption({
        title: { //图表的标题
            text: '每年收入走势'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: '每年收入走势',
                type: 'line',
                data: [46, 50, 52, 48, 40, 35, 65, 45, 58, 30, 72, 56],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            },
            {
                name: '每年同期收入走势',
                type: 'line',
                data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            }
        ]
    });
</script>